<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>SVG Plane Animation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body{
            overflow: hidden;
        }
    </style>
</head>

<body>
<svg width="1000" height="600">
    <g transform="scale(0.5)">
        <title>Layer 1</title>
        <image xlink:href="./images/map.png" height="1084" width="1526" y="0" x="2.50004"/>
        <path id="trafficPath" fill="none" stroke="#D9DADA" d="m 0 0 c-35.58005,12.25289 -123.66089,12.00559 -124.24042,61.75904l-175.00262,280.0042c-65.00098,67.50101 -175.00262,212.50319 -245.00368,302.50454c7.50011,4.16673 25.00038,23.33368 40.00061,45.00067l-20.00031,75.00113c-8.33346,50.00075 -19.16696,100.0015 -22.50034,150.00225"/>

        <image id="truck" x="966.75305" y="33.24238" xlink:href="./images/truck.png"/>
        <animateMotion xlink:href="#truck" dur="8s" repeatCount="indefinite">
            <mpath xlink:href="#trafficPath" />
        </animateMotion>
    </g>
</svg>
</body>
</html>
